<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>商品列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.11.2/css/layui.min.css" rel="stylesheet">
    <style>
        .sousuo {
            margin-left: 20px;
            position: relative;
        }

        .sousuo>img {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 20px;
            left: 3px;
            border-radius: 5px 0 0 5px;
        }

        #sou {
            width: 900px;
            height: 25px;
            border-radius: 50px;
            box-sizing: border-box;
            padding-left: 25px;
            border: 0;
        }

        .layui-side-scroll {
            background-color: #003f70;
        }

        .layui-nav-tree {
            background-color: #003f70;
        }

        #layui-header {
            background-color: #003f70;
        }

        .goods {
            width: 100%;
            height: 100%;
            background: url("https://c.53326.com/d/file/newpc202302/pxpjrtiqe02.jpg") no-repeat center/cover;
        }

        .goods>div {
            box-sizing: border-box;
            width: 100%;
            height: 50px;
            line-height: 50px;
            display: flex;
            justify-content: space-around;
            border: 2px solid #1e9fff;
        }

        .goods>div>span {
            display: inline-block;
            width: 33.3%;
            height: 100%;
            text-align: center;
            font-size: 15px;
            border-right: 2px solid #1e9fff;
            background-color: white;

        }

        .goods>div>span:last-child {
            border: 0;
        }

        .goods>ul {
            box-sizing: border-box;
            width: 100%;
            height: 500px;
            overflow: hidden;
        }

        .goods>ul>li {
            width: 100%;
            height: 40px;
            background-color: white;
            margin: 10px 0;
            display: flex;
            justify-content: space-around;
            line-height: 40px;
            text-align: center;
        }

        .goods>ul>li span {
            display: inline-block;
            width: 30%;
            height: 100%;
            text-align: center;
        }

        .goods>ul>li img {
            width: 40px;
            height: 40px;
            vertical-align: middle;
            margin: 0 50px;
        }

        .time {
            font-size: 10px;
        }

        .revise {
            text-align: center;
        }

        .revise>input {
            width: 300px;
            height: 30px;
            border-radius: 30px;
            box-sizing: border-box;
            padding: 5px;
            margin: 5px;
        }

        .revise>button {
            width: 300px;
            height: 50px;
            border-radius: 10px;
            border: 0;
            cursor: pointer;
            background-color: #1e9fff;
            text-align: center;
        }

        .tian_btn {
            position: absolute;
            right: 30px;
        }

        .layui-col-md6 {
            width: 30%;
        }

        .layui-footer>div {
            text-align: center;
        }

        .layui-footer i {
            display: inline-block;
            height: 40px;
            width: 60px;
            cursor: pointer;
            font-style: normal;
            user-select: none;
            margin-top: 2px;
        }

        .beijing {
            background-color: #1e9fff;
        }

        .ste_sw {
            cursor: pointer;
            user-select: none;
        }

        .up {
            position: absolute;
            height: 30px;
            line-height: 30px;
            right: 80px;
        }

        .down {
            position: absolute;
            right: 175px;
            height: 30px;
            line-height: 30px;
        }

        .reh {
            position: absolute;
            right: 270px;
            height: 30px;
            line-height: 30px;
        }

        .time1 {
            margin: 5px 50px;
        }
    </style>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header" id="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black" id="layui-bg-black">管理系统</div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <!-- 移动端显示 -->
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                </li>
                <!-- <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li> -->
                <!-- 搜索 -->
                <li class="layui-nav-item">
                    <div class="sousuo">
                        <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.lpddQ7iAtQBY3ans1P7oVgHaHa?w=201&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
                            alt="">
                        <input type="text" name="" id="sou" placeholder="请输入内容">
                    </div>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                    <a href="javascript:;">
                        <!-- 头像 -->
                        <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                        <span class="yhname">1</span>
                    </a>
                    <!-- 头像旁边的下拉列表 -->
                    <dl class="layui-nav-child">
                        <dd> <a href="./个人资料.html">个人资料</a></dd>
                        <dd><a href="./商品列表.html">商品列表</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="./首页.html">商品数据</a>
                    </li>
                    <li class="layui-nav-item" id="yi">
                        <a href="./商品列表.html">商品管理列表</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="./个人资料.html">个人资料</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="./商品详情.html">商品详情</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <blockquote class="layui-elem-quote layui-text">
                    商品数据
                    <button type="button" class="layui-btn reh" onclick="reh()">
                        复原
                    </button>
                    <button type="button" class="layui-btn down" onclick="down()">
                        向下 <i class="layui-icon layui-icon-down layui-font-12"></i>
                    </button>
                    <button type="button" class="layui-btn up" onclick="up()">
                        向上 <i class="layui-icon layui-icon-up layui-font-12"></i>
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm tian_btn" lay-on="page" onclick="tian()">
                        <i class="layui-icon layui-icon-add-1"></i>
                    </button>
                </blockquote>
                <div class="goods">
                    <div>
                        <span>图片</span>
                        <span>名称</span>
                        <span>价格</span>
                        <span>库存</span>
                        <span>状态</span>
                        <span>出售情况</span>
                        <span>详情</span>
                        <span>操作</span>
                    </div>
                    <ul class="goods_ul">
                    </ul>
                </div>
            </div>
        </div>
        <div class="layui-footer">
            <!-- 底部固定区域 -->
            <div>
                <i class="beijing">1</i>
                <i>2</i>
                <i>3</i>
                <i>4</i>
                <i>5</i>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.11.2/layui.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        //页面加载完
        $('document').ready(() => {
            $('#yi').css('background', '#16baaa')
        })
        //JS 设置layui
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element;
            var layer = layui.layer;
            var util = layui.util;
            var $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                menuLeft: function (othis) { // 左侧菜单事件
                    layer.msg('展开左侧菜单的操作', { icon: 0 });
                },
            });

        });
        layui.use(function () {
            var layer = layui.layer;
            var util = layui.util;
            // 批量事件
            util.on('lay-on', {
                page: function () {
                    // 页面层
                    layer.open({
                        type: 1,
                        area: ['500px', '300px'], // 宽高
                        content: `
                        <div style="padding: 11px;" class = "revise">
                                图片：<input type="text"><br>
                                名称：<input type="text"><br>
                                价格：<input type="text"><br>
                                库存：<input type="text"><br>
                                状态：<input type="text"><br>
                                情况：<input type="text"><br>
                                <button onclick="tinajia()">确认添加</button>
                        </div>`,
                        title: '添加商品'
                    });
                },
                page1: function () {
                    // 页面层
                    layer.open({
                        type: 1,
                        area: ['500px', '300px'], // 宽高
                        content: `
                        <div style="padding: 11px;" class = "revise">
                                图片：<input type="text"><br>
                                名称：<input type="text"><br>
                                价格：<input type="text"><br>
                                库存：<input type="text"><br>
                                状态：<input type="text"><br>
                                情况：<input type="text"><br>
                                <button onclick="xiugai()">确认修改</button>
                        </div>`,
                        title: '修改商品'
                    });
                },
            });
            var laypage = layui.laypage;
            // 普通用法
            laypage.render({
                elem: 'demo-laypage-normal-1',
                count: 50 // 数据总数

            });
        });
        var yx = JSON.parse(localStorage.getItem('geren'))
        //头像
        $('.layui-nav-img')[0].src = `${yx.img}`
        //用户名
        $('.yhname').html(yx.name)
        //分页
        var i = $('.layui-footer i')
        i.each((index, item) => {
            item.onclick = () => {
                bs(index)
                if (down_1 == 0) {
                    xuan(item.innerHTML)
                } else if (down_1 == 1) {
                    down(item.innerHTML)
                } else if (down_1 == 2) {
                    up(item.innerHTML)
                }
            }
        })
        //点击分页按钮变色
        function bs(a) {
            i.each((index, item) => {
                if (a == index) {
                    item.classList.add('beijing')
                } else {
                    item.classList.remove('beijing')
                }
            })
        }
        //渲染
        function xuan(i = 1, shu = undefined) {
            $('.goods_ul').html('')
            $.ajax({
                type: "GET",
                url: 'https://liu.zzgoodqc.cn/goodsx/listByPage',
                data: {
                    page: `${i}`,
                    limit: "9"
                },
                dataType: "json",
                success: (a) => {
                    var shu1 = a.data
                    if (shu == undefined) {
                        shu1.forEach(item => {
                            $('.goods_ul').append(`
                             <li>
                                <img src="${item.img}" alt="">
                                <span>${item.goods_name}</span>
                                <span>￥${item.price}</span>
                                <span>${item.stock}件</span>
                                <span class="ste_sw">${item.status}</span>
                                <span>${item.sold}件</span>
                                <button type="button" class="time1 layui-btn layui-btn-primary layui-btn-sm" onclick="detail(${item.id})">详情</button>
                                <span>
                                    <button type="button" class="layui-btn layui-btn-sm" lay-on="page1" onclick="xiu(${item.id})">
                                        <i class="layui-icon layui-icon-edit"></i>
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-sm" onclick="shan(${item.id})">
                                        <i class="layui-icon layui-icon-delete"></i>
                                    </button>
                                </span>
                            </li> `)
                        });
                    } else {
                        shu.forEach(item1 => {
                            $('.goods_ul').append(`
                                 <li>
                                    <img src="${item1.img}" alt="">
                                    <span>${item1.goods_name}</span>
                                    <span>￥${item1.price}</span>
                                    <span>${item1.stock}件</span>
                                    <span class="ste_sw">${item1.status}</span>
                                    <span>${item1.sold}件</span>
                                    <span class="time">${item1.created_at}</span>
                                    <button type="button" class="time1 layui-btn layui-btn-primary layui-btn-sm" onclick="detail(${item1.id})">详情</button>
                                    <span>
                                        <button type="button" class="layui-btn layui-btn-sm" lay-on="page1" onclick="xiu(${item1.id})">
                                            <i class="layui-icon layui-icon-edit"></i>
                                        </button>
                                        <button type="button" class="layui-btn layui-btn-sm" onclick="shan(${item1.id})">
                                            <i class="layui-icon layui-icon-delete"></i>
                                        </button>
                                    </span>
                                </li> `)
                        });
                    }
                    //状态显示
                    $('.ste_sw').each((index, item) => {
                        if (item.innerHTML == '1') {
                            item.innerHTML = '上架'
                        } else if (item.innerHTML == '2') {
                            item.innerHTML = '下架'
                        }
                        //切换
                        item.onclick = () => {
                            if (item.innerHTML == '上架') {
                                item.innerHTML = '下架'
                            } else if (item.innerHTML == '下架') {
                                item.innerHTML = '上架'
                            }
                        }
                    })
                },
                error: (e) => {
                    console.log(e);
                }
            })
        } xuan()
        //删除
        function shan(id) {
            $.ajax({
                type: "GET",
                url: 'https://liu.zzgoodqc.cn/goodsx/delete',
                data: {
                    id: id,
                },
                dataType: "json",
                success: (a) => {
                    if (down_1 == 0) {
                        xuan()
                    } else if (down_1 == 1) {
                        down()
                    } else if (down_1 == 2) {
                        up()
                    }
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
        //确认添加
        function tinajia() {
            let inps = $('.revise').children('input')
            let inps1 = inps[0]
            let inps2 = inps[1]
            let inps3 = inps[2]
            let inps4 = inps[3]
            let inps5 = inps[4]
            let inps6 = inps[5]
            $.ajax({
                type: "POST",
                url: 'https://liu.zzgoodqc.cn/goodsx/add',
                data: {
                    img: inps1.value,
                    goods_name: inps2.value,
                    price: inps3.value,
                    stock: inps4.value,
                    status: inps5.value,
                    sold: inps6.value,
                },
                dataType: "json",
                success: (a) => {
                    if (down_1 == 0) {
                        xuan()
                    } else if (down_1 == 1) {
                        down()
                    } else if (down_1 == 2) {
                        up()
                    }
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
        //确认修改id
        var goods_id;
        function xiu(id) {
            goods_id = id
        }
        //确认修改
        function xiugai() {
            let inps = $('.revise').children('input')
            let inps1 = inps[0]
            let inps2 = inps[1]
            let inps3 = inps[2]
            let inps4 = inps[3]
            let inps5 = inps[4]
            let inps6 = inps[5]
            $.ajax({
                type: "POST",
                url: 'https://liu.zzgoodqc.cn/goodsx/update',
                data: {
                    id: goods_id,
                    img: inps1.value,
                    goods_name: inps2.value,
                    price: inps3.value,
                    stock: inps4.value,
                    status: inps5.value,
                    sold: inps6.value,
                },
                dataType: "json",
                success: (a) => {
                    if (down_1 == 0) {
                        xuan()
                    } else if (down_1 == 1) {
                        down()
                    } else if (down_1 == 2) {
                        up()
                    }
                },
                error: (e) => {
                    console.log(e);
                }
            })

        };
        //排序向下，点击后向渲染传参，如果没有传参渲染正常的参数，如果传了就渲染传递后的参数
        var down_1 = 0
        function down(i = 1) {
            down_1 = 1
            $('.goods_ul').html('')
            $.ajax({
                type: "GET",
                url: 'https://liu.zzgoodqc.cn/goodsx/sort',
                data: {
                    sort: 'desc',
                    type: "price",
                    page: `${i}`,
                    limit: '9',
                },
                dataType: "json",
                success: (a) => {
                    var shu = a.data
                    console.log(shu);

                    xuan(i, shu)
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
        //排序向上
        function up(i = 1) {
            down_1 = 2
            $('.goods_ul').html('')
            $.ajax({
                type: "GET",
                url: 'https://liu.zzgoodqc.cn/goodsx/sort',
                data: {
                    sort: 'asc',
                    type: "price",
                    page: `${i}`,
                    limit: '9',
                },
                dataType: "json",
                success: (a) => {
                    var shu = a.data
                    xuan(i, shu)
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
        //排序复原
        function reh() {
            down_1 = 0
            xuan()
        }
        //商品详情
        function detail(id) {
            $.ajax({
                type: "GET",
                url: 'https://liu.zzgoodqc.cn/goodsx/detail',
                data: {
                    id: `${id}`,
                },
                dataType: "json",
                success: (a) => {
                    var shu = a.data
                    localStorage.setItem('detail', JSON.stringify(shu))
                    location.assign('./商品详情.html')
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
        //搜索
        function sousuo(i = 1) {
            $('.sousuo input').on('blur', () => {
                var inp_val = $('.sousuo input').val()
                $.ajax({
                    type: "POST",
                    url: 'https://liu.zzgoodqc.cn/goodsx/search',
                    data: {
                        goods_name: inp_val,
                    },
                    dataType: "json",
                    success: (a) => {
                        var shu = a.data
                        xuan(i, shu)
                    },
                    error: (e) => {
                        console.log(e);
                    }
                })
            })
        } sousuo()

    </script>
</body>

</html>